<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl font-semibold" style="color: #4e598c">用户活跃情况</div>
    </div>
    <div class="md:flex">
      <div :id="dauPieChartName" style="width: 300%; height: 300%"></div>
      <div :id="dauMauPieChartName" style="width: 300%; height: 300%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import { ChartProps } from '/@/views/maintenance-center/cloud-service-monitor/Cards/props';
import { getUserDauMau } from '/@/api/operation-center/tenant-opertation/user-activity-analysis/userActivityAnalysis';

const dauPieChartName = 'dau-pie-chart';
const dauMauPieChartName = 'dau-mau-pie-chart';

var dauOption;
var dauMauOption;

let dauItemList: any[] = [];
let dauMauItemList: any[] = [];

defineProps({
  ...ChartProps,
});

function initPieChart(pieChartName: string, pieChartData: any[], option: any, title: string) {
  let pieDom = document.getElementById(pieChartName);
  let myChart = echarts.init(pieDom);

  option = {
    title: {
      text: title,
      left: 'center',
    },
    series: [
      {
        type: 'pie',
        data: pieChartData,
        radius: ['40%', '70%'],
      },
    ],
  };

  option && myChart.setOption(option);
}

onMounted(() => {
  getUserDauMau().then((res) => {
    let dailyActiveUserNum = res.dailyActiveUserNum;
    let dailyOverMonthlyActiveUserNum = res.dailyOverMonthlyActiveUserNum;

    dauItemList.push({
      name: '日活用户数',
      value: dailyActiveUserNum[0],
    });

    dauItemList.push({
      name: '日非活用户数',
      value: dailyActiveUserNum[1],
    });

    dauMauItemList.push({
      name: '日活跃用户数',
      value: dailyOverMonthlyActiveUserNum[0],
    });

    dauMauItemList.push({
      name: '月活跃 & 日非活用户数',
      value: dailyOverMonthlyActiveUserNum[1],
    });

    initPieChart(dauPieChartName, dauItemList, dauOption, '日活比例');
    initPieChart(dauMauPieChartName, dauMauItemList, dauMauOption, 'DAU / MAU');
  });
});
</script>
